<template>
  <el-container class="main_con">
    <div class="filter_con ds_block">
      <div class="button_area">
        <el-button v-has type="primary" size="medium" @click="addItem">新增文章</el-button>
      </div>
      <div class="filter_area">
        <el-input class="serach_input mr_15 mt_15" size="medium" style="width:250px" v-model="obj.name" placeholder="分类名称"></el-input>
        <label class="mr_15 mt_15">状态</label>
        <el-select size="medium" v-model="obj.status" placeholder="请选择" class="mr_15 mt_15">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button class="mr_15 mt_15" @click="searchList" size="medium">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table
         class="main-loading"
        :data="list"
        element-loading-text="" fit highlight-current-row>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="title" label="文章标题"></el-table-column>
        <el-table-column prop="subhead" label="副标题"></el-table-column>
        <el-table-column prop="status_text" label="状态" width="120px"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button v-has type="text" @click="upDownItem(scope.row)">{{scope.row.status == 1 ? '禁用' : '启用'}}</el-button>
            <el-button v-has type="text" @click="editItem(scope.row)">编辑</el-button>
            <el-button v-has type="text" @click="delItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" style="flex-direction: row-reverse;" v-show="total != 0">
        <el-pagination
          @current-change="changePage"
          class="pages" background hide-on-single-page layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
  </el-container>
</template>

<script>
import {
  delArticle,
  editArticle,
  getArticles
} from '@/api/mall/article';
export default {
  data(){
    return {
      options:[{
        value: -1,
        label: '全部'
      }, {
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '未启用'
      }],
      obj:{
        name:'',
        status:-1
      },
      objTemp:{},
      total:0,
      page:1,
      size:10,
      isLoading: false,
      list:[]
    }
  },
  components: {},
  mounted(){
    this.searchList();
  },
  methods:{
    //新增文章
    addItem(){
      this.$router.push('/article/item');
    },
    //查询数据
    searchList(){
      //复制查询对象
      this.objTemp = Object.assign({},this.obj);
      //status == -1时候删除字段
      if(this.objTemp.status == -1){
        delete this.objTemp.status;
      };
      this.getDataList();
    },
    //查询数据本体
    getDataList(){
      this.isLoading = true;
      getArticles(this.objTemp,this.page,this.size).then(res => {
        this.isLoading = false;
        let o = res.msg;
        this.list = o.data;
        this.total = o.total;
      }).catch(e => {
        this.isLoading = false;
      });
    },
    //编辑数据
    editItem(obj){
      //this.$router.push({path:'/merchant/item',query:{'id':obj.id}});
      this.$router.push({
        path:'/article/item',
        query:{
          id:obj.id
        }
      })
    },
    //启用/禁用
    upDownItem(obj){
      let _o = {};
      _o.id = obj.id;
      _o.update_time = obj.update_time;
      let s = '';
      if(obj.status == 1){
        //当前为启用,操作后为禁用
        _o.status = 0;
        s = '是否禁用该文章?';
      }else if(obj.status == 0){
        //当前为禁用,操作后为启用
        _o.status = 1;
        s = '是否启用该文章?';
      };

      this.$confirm(s).then(_ => {
        this.isLoading = true;
        editArticle(_o).then(res => {
          this.isLoading = false;
          this.getDataList();
        }).catch(e => {
          this.isLoading = false;
        });
      }).catch(p => {
        //empty
      });
    },
    //删除数据
    delItem(id){
      this.$confirm('是否要删除该条数据？').then(_ => {
        this.isLoading = true;
        delArticle(id).then(res => {
          this.isLoading = false;
          //重新加载数据
          this.getDataList();
        }).catch(e => {
          this.isLoading = false;
        });
      }).catch(p => {
        //empty
      });
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    },
  }
}
</script>

<style lang="scss" scoped></style>